<template>
	<view class="home">
		<!-- 搜索菜品 -->
		<view class="search">
			<uni-easyinput 
			trim="true"
			placeholderStyle="text-align:center"
			suffixIcon="search" 
			v-model="value" 
			placeholder="搜索菜品" 
			@iconClick="btnSearch"
			></uni-easyinput>
		</view>
		<!-- 轮播图 -->
		<swiper
		class="banner-box"
		circular
		:indicator-dots="true" 
		:autoplay="true" 
		:interval="3000" 
		:duration="1000">
			<swiper-item class="banner-item">
				<image src="../../static/gou-img/banner1.jpg" mode=""></image>
			</swiper-item>
			<swiper-item class="banner-item">
				<image src="../../static/gou-img/banner2.jpg" mode=""></image>
			</swiper-item>
			<swiper-item class="banner-item">
				<image src="../../static/gou-img/banner3.jpg" mode=""></image>
			</swiper-item>
			<swiper-item class="banner-item">
				<image src="../../static/gou-img/banner4.jpg" mode=""></image>
			</swiper-item>
		</swiper>
		<!-- nav -->
		<view class="nav">
			<view class="nav-item">
				<view class="nav-icon iconfont icon-RectangleCopy"></view>
				<view class="nav-text">
					<text>预约取号</text>
				</view>
			</view>
			<view class="nav-item">
				<view class="nav-icon iconfont icon-meishi"></view>
				<view class="nav-text">
					<text>外卖点餐</text>
				</view>
			</view>
			<view class="nav-item">
				<view class="nav-icon iconfont icon-shangjiaxinxi"></view>
				<view class="nav-text">
					<text>商家信息</text>
				</view>
			</view>
			<view class="nav-item">
				<view class="nav-icon iconfont icon-anzhuo-"></view>
				<view class="nav-text">
					<text>环境展示</text>
				</view>
			</view>
		</view>
	    <!-- 推荐 优惠活动 -->
		<view class="recommended-activities">
			<view class="rec-act-item">
				<image src="../../static/gou-img/dish_pic.jpg" mode=""></image>
				<text>菜品推荐</text>
			</view>
			<view class="rec-act-item">
				<image src="../../static/gou-img/active.jpg" mode=""></image>
				<text>优惠活动</text>
			</view>
		</view>
	    <!-- 领取优惠卷 -->
		<view class="get-coupon">
			<text>领取优惠卷，点餐享优惠</text>
			<view class="circle-icon">
				<text>抢</text>
			</view>
		</view>
	    <!-- 特惠推荐 -->
		<view class="preferential">
			<view class="pre-title">
				<text>特惠推荐</text>
			</view>
			<view class="arrow-right iconfont icon-arrow-right"></view>
		    <view class="goods-list">
				<view class="goods-item" @click="getDishDetail" hover-class="bgc-hover">
					<image src="../../static/gou-img/huiguoro.jpg" mode=""></image>
					<view class="price">
						<text>回锅肉</text>
						<text>￥17.54</text>
					</view>
					<view class="desc">
						<text>精选五花肉+秘制香料</text>
					</view>
				</view>
				<view class="goods-item">
					<image src="../../static/gou-img/xiaochaorou.jpg" mode=""></image>
					<view class="price">
						<text>小炒肉</text>
						<text>￥18.54</text>
					</view>
					<view class="desc">
						<text>精选瘦肉+秘制香料</text>
					</view>
				</view>
				<view class="goods-item">
					<image src="../../static/gou-img/xiaochaorou.jpg" mode=""></image>
					<view class="price">
						<text>小炒肉</text>
						<text>￥18.54</text>
					</view>
					<view class="desc">
						<text>精选瘦肉+秘制香料</text>
					</view>
				</view>
				<view class="goods-item">
					<image src="../../static/gou-img/huiguoro.jpg" mode=""></image>
					<view class="price">
						<text>回锅肉</text>
						<text>￥17.54</text>
					</view>
					<view class="desc">
						<text>精选五花肉+秘制香料</text>
					</view>
				</view>
				
			</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				value:"",//搜索输入框的值

			}
		},
		onLoad() {

		},
		methods: {
			// 点击搜索图标，搜索菜品函数
			btnSearch(){
				this.value="";//点击搜索，清空输入框的值
				
			},
			//获取菜品详情函数
			getDishDetail(){
				setTimeout(()=>{
					uni.navigateTo({
						url:"/pages/dishDetails/dishDetails"
					})
				},200)
			}

		}
	}
</script>

<style lang="scss" scoped>
	@import url("../../static/font/iconfont.css");
	.home{
		border-top: 1px solid #59595996;
		&>view{
			padding: 20rpx;
		}
		.banner-box{
			width: 660rpx;
			height: 300rpx;
			margin: 0 auto;
			border-radius: 8rpx;
			background-color: red;
			.banner-item>image{
				width: 100%;
				height: 100%;
			}
		}
		.nav{		
			display: flex;
			.nav-item{
				width: 25%;
				text-align: center;
				.nav-icon{
					width: 110rpx;
					height: 110rpx;
					border-radius:50% ;
					background-color: #0c8f99;
					// background-color: #B50E02;
					text-align: center;
					line-height: 110rpx;
					margin: 20rpx auto;
					font-size: 70rpx;
					color:white;
				}
				.icon-meishi{
					font-size: 50rpx;
				}
				text{
					font-size: 30rpx;
				}
				
			}
		}
	    .recommended-activities{
			display: flex;
			.rec-act-item{
				position: relative;
				display: flex;
				justify-content: space-around;
				width: 620rpx;
				height: 150rpx;
				image{
					width: 300rpx;
					height: 150rpx;	
					border-radius: 8rpx;
				}
				text{
					position: absolute;
					color: #fff;
					font-weight: 700;
					line-height: 150rpx;
				}
			}
		}
	    .get-coupon{
			width: 660rpx;
			height: 70rpx;
		    // background-color: #B50E02;
			background-color: #0c8f99;
			margin: 10rpx auto;
			border-radius: 100rpx;
			text-align: center;
			position: relative;
			line-height: 70rpx;
			&>text{
				font-size: 30rpx;
				color: #fff;
			}
			.circle-icon{
				position: absolute;
				right: 5rpx;
				top: 5rpx;
				width: 100rpx;
				height: 100rpx;
				background-color: #fff;
				border-radius: 50%;
				// box-shadow: 1px 1px 3px #B50E02;
				text{
					line-height: 100rpx;
					font-size: 40rpx;
				}
			}
		}
	    .preferential{
			width: 640rpx;
			// height: 50rpx;
			// background-color: red;
			margin: 20rpx auto;
			display: flex;
			flex-wrap: wrap;
			// justify-content: space-between;
			line-height: 50rpx;
			position: relative;
			.pre-title{
				position: absolute;
				left: 0;
				font-size: 40rpx;
				font-weight: 400;
			}
			.arrow-right{
				font-size: 50rpx;
				position: absolute;
				right: 0;
				color: #5e585885;	
			}
			.goods-list{
				margin-top: 70rpx;
				width: 700rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				.goods-item{
					background-color: #fff;
					width: 300rpx;
					margin-bottom: 30rpx;
					image{
						width: 300rpx;
						height: 200rpx;
						border-radius: 8rpx;
					}
					.price{
						display: flex;
						align-items: center;
						text:nth-child(1){
							font-size: 34rpx;
							padding-right: 20rpx;
						}
						text:nth-child(2){
							color: #FF4900;
							font-weight: 700;
						}
					}
					.desc>text{
						font-size: 30rpx;
						color: #999;
					}
				}
				.bgc-hover{
					background-color: #e7e7e7;
				}
			}
		}
	}
	
</style>
